<template>
  <div class="schemaConfig">
    <el-form class="m7-form" ref="schemaConfigRef"
      size="mini" :model="schemaConfigForm" label-position="top">
      <el-form-item label="所属部门" prop="departmentIdList">
        <el-cascader
          v-model="schemaConfigForm.departmentIdList"
          :options="schemaOpt"
          :props="{ checkStrictly: true, label: 'name', children: 'children', value: '_id', multiple: true }"
          clearable>
        </el-cascader>
      </el-form-item>
      <el-form-item label="上级" prop="leaderId">
        <m7Select
          size="mini"
          filterable
          clearable
          :options="agentListArr"
          :defaultProps="{value: '_id', label: 'name'}"
          v-model="schemaConfigForm.leaderId"
          placeholder="请选择">
        </m7Select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Mixins } from 'vue-property-decorator'
import oprateMixin from '@/mixins/dialogOprate'
interface ArrayObj {
  props: string
}
@Component({
  name: 'callCenterConfig'
})
export default class CallCenterConfig extends Mixins(oprateMixin) {
  public schemaConfigForm = {
    departmentIdList: [], // 所属部门
    leaderId: '' // 上级id
  }

  public setSchemaConfigData (data?: any) {
    if (data) {
      const { departmentIdList, leaderId } = data
      this.schemaConfigForm = { departmentIdList, leaderId }
    } else {
      this.schemaConfigForm = {
        departmentIdList: [],
        leaderId: ''
      }
    }
    this.open()
  }

  @Prop(Array) public schemaOpt!: ArrayObj[] // 部门数据
  @Prop(Array) public agentListArr!: ArrayObj[] // 上级数据
}
</script>
<style lang="stylus" scoped>
  .schemaConfig
     margin-top 16px
     .el-cascader
      width 100%
</style>
